<template>
  <div>
    <div class="xx">
      <div class="header">
        <span class="iconfont icon-fanhui" @click="funaaaa()"></span>
        <p>{{ this.n2[0].xiangqingss.title |xt1 }}</p>
        <span class="iconfont icon-xiaoxi1"></span>
        <span class="iconfont icon-gengduo"></span>
      </div>
      <ul class="u1">
        <li v-for="(item, index) in this.n2[0].xiangqingss.ximg" :key="index">
          <img :src="item.jj" alt="" />
        </li>
      </ul>
      <p class="p1">{{ this.n2[0].xiangqingss.xtopic }}</p>
      <div class="d1">来源@{{ this.n2[0].xiangqingss.origin }}</div>
      <div class="center">
        <div class="top">
          <img :src="this.n2[0].xiangqingss.ximgs" alt="" />
          <ul class="u2">
            <li>
              <div class="shang">
                <p class="name">{{ this.n2[0].xiangqingss.name }}</p>
                <p class="icon">
                  <span class="iconfont icon-diamond-o">VIP </span>
                </p>
              </div>
              <p class="time">
                {{ this.n2[0].xiangqingss.time }}
                <span class="kan">{{ this.n2[0].xiangqingss.number }}</span>
              </p>
            </li>
          </ul>
          <div class="about">关注</div>
        </div>
        <div class="pinglun">
          <h3>所有评论</h3>
          <div class="ping">
            <img src="imgs/j2.jpg" alt="" />
            <div class="right">
              <p class="i1">堆糖评论员</p>
              <span class="i2">还没有热评哦，快来占领热评吧</span>
            </div>
          </div>
          <div class="content">
            <img src="imgs/j7.jpg" alt="" />
            <div class="mingzi">
              <p>{{ this.n2[0].xiangqingss.mingzi }}</p>
              <p>{{ this.n2[0].xiangqingss.state }}</p>
              <p>{{ this.n2[0].xiangqingss.miaoshu }}</p>
            </div>
            <span class="iconfont icon-dianzan">
              <span class="n1">{{ this.n2[0].xiangqingss.shuzi }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    funaaaa() {
      this.$router.push("/Home");
    },
  },
  filters:{
    xt1(val){
      if(val.length>4){
        return val.substr(0,3)+".."
      }else{
        return val
      }
    }
  },
  data() {
    return {
      newn: [],
    };
  },
  created() {
    this.$store.dispatch("getnum", { url: "/data/one" });

    // console.log(111);
  },
  computed: {
    n1() {
      return this.$store.state.nn.newnum;
    },
    n2() {
      return this.$store.state.nn.newa;
    },
  },
  mounted() {
    console.log("我是传过来的id", this.$route.params.xx);
    console.log("我是vuex里面的数据", this.$store.state.nn.newnum);
    this.newn = this.n1.filter((v) => {
      return v.id == this.$route.params.xx;
    });
    console.log("筛选的值", this.newn[0]);
    this.$store.commit("upnewa", this.newn);

    // console.log("this.$store.state.nn.newa", this.$store.state.nn.newa);
  },
};
</script>

<style scoped>
@import url(../assets/font1/iconfont.css);
.header {
  display: flex;
  padding-top: 0.1rem;
  margin-left: 0.1rem;
}
.iconfont {
  font-size: 0.2rem;
}
p {
  margin-left: 0.3rem;
  font-size: 0.2rem;
}
.icon-xiaoxi1 {
  margin-left: 1.5rem;
  font-size: 0.2rem;
}
.icon-gengduo {
  margin-left: 0.3rem;
}
.u1 {
  width: 100%;
  height: 3rem;
  /* background-color: red; */
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.u1 li {
  width: 33%;
  height: 33%;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  flex-shrink: none;
}
.u1 li img {
  width: 100%;
  height: 100%;
}
.p1 {
  font-size: 0.18rem;
  margin: 0.1rem 0.1rem;
}
.d1 {
  font-size: 0.2rem;
  margin-left: 0.1rem;
}
.center {
  width: 100%;
  height: 2rem;

  margin-top: 0.2rem;
}
.center .top {
  width: 100%;
  height: 0.6rem;

  display: flex;
  background-color: #fff;
}
.center .top img {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-top: 0.08rem;
  margin-left: 0.1rem;
}
.top .u2 {
  height: 0.6rem;
  margin-left: -0.05rem;
  margin-top: 0.1rem;
}
.u2 li .name {
  font-size: 0.14rem;
  font-weight: 700;
  margin-bottom: 0.05rem;
}
.u2 li .icon {
  width: 0.6rem;
  height: 0.2rem;
  background-color: #fe9787;
  margin-top: -0.04rem;
  border-radius: 0.2rem;
  text-align: center;
}
.icon-diamond-o {
  font-size: 0.14rem;
  margin-right: 0.5rem;
  line-height: 0.2rem;
}
.u2 li .shang {
  display: flex;
}
.u2 li .time {
  font-size: 0.12rem;
  color: #757575;
}
.u2 li span {
  margin-left: 0.1rem;
  color: #757575;
}
.about {
  width: 0.8rem;
  height: 0.4rem;
  background-color: #ff5a59;
  margin-left: 0.6rem;
  border-radius: 0.3rem;
}
.about {
  margin-right: 0.1rem;
  text-align: center;
  line-height: 0.4rem;
  margin-top: 0.05rem;
  color: #fff;
}
.pinglun {
  margin-top: 0.2rem;
  background-color: #fff;
  width: 100%;
  height: 4rem;
}
.pinglun h3 {
  font-weight: 700;
  padding-top: 0.1rem;
}
.ping {
  display: flex;
  margin-left: 0.1rem;
  margin-top: 0.2rem;
}
.ping img {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
}
.ping .i1 {
  font-size: 0.14rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.ping .right .i2 {
  font-size: 0.14rem;
  font-weight: 700;
  margin-top: 0.2rem;
  margin-left: 0.1rem;
}
.center .pinglun .content {
  display: flex;
  width: 100%;
  margin-top: 0.5rem;
}
.center .pinglun .content img {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  margin-left: 0.1rem;
}
.pinglun .mingzi p:nth-child(1) {
  font-size: 0.14rem;
  font-weight: 700;
  margin-bottom: 0.05rem;
}
.pinglun .mingzi p:nth-child(2) {
  font-size: 0.12rem;
  color: #b7b7b7;
  /* font-weight: 700; */
}
.pinglun .mingzi p:nth-child(3) {
  margin-top: 0.1rem;
}
.pinglun .content .icon-dianzan {
  margin-left: 1.7rem;
  color: #b7b7b7;
}
.n1 {
  margin-left: 0.1rem;
}
</style>